<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>封装$.get方法发送请求(1)</title>
</head>
<body>
  <script>
    var $ = {
      get : function(){
        var xhr = new XMLHttpRequest();
        xhr.open('get','/api/getStr');
        xhr.send();
        xhr.onload = function(){
          alert(xhr.responseText);
        };
      }
    }
    $.get();
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>封装$.get方法发送请求(2)</title>
</head>
<body>
  <script>
    //1.解决 在创建XMLHttpRequest对象时，没有处理浏览器兼容性
    var $ = {
      get : function(){
        var xhr = this.createXhr();
        xhr.open('get','/api/getTime');
        xhr.send();
        xhr.onload = function(){
          alert(xhr.responseText);
        };
      },
      createXhr : function(){
        var xhr = '';
        if(window.XMLHttpRequest){
          xhr = new XMLHttpRequest();
        }else{
          xhr = new ActiveXObject('Msxml2','XMLHTTP');
        };
        return xhr;
      },
    }
    $.get();
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>封装$.get方法发送请求(3)</title>
</head>
<body>
  <script>
    //2.解决 只能请求 /api/getStr 一个地址
    var $ = {
      get : function(url){
        var str = url;
        var xhr = this.createXhr();
        xhr.open('get',str);
        xhr.send();
        xhr.onload = function(){
          alert(xhr.responseText);
        };
      },
      createXhr : function(){
        var xhr = null;
        if(window.XMLHttpRequest){
          xhr = new XMLHttpRequest();
        }else{
          xhr = new ActiveXObject('Msxml2','XMLHTTP');
        };
        return xhr;
      },
    }  
    $.get('/api/getStr');
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>封装$.get方法发送请求(4)</title>
</head>
<body>
  <script>
    //3. 解决 无法灵活向后台的页面发送参数     
    var $ = {
      get : function(url,data){
        var xhr = this.createXhr();
        var str = url+'?'+data;
        xhr.open('get',str);
        xhr.send();
        xhr.onload = function(){
          alert(xhr.responseText);
        };
      },
      createXhr : function(){
        var xhr = null;
        if(window.XMLHttpRequest){
          xhr = new XMLHttpRequest();
        }else{
          xhr = new ActiveXObject('Msxml2','XMLHTTP');
        }
        return xhr;
      }
    }
    $.get('/api/getString','name=张');
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>封装$.get方法发送请求(5)</title>
</head>
<body>
  <div></div>
  <script>
    //4.解决 接收到的数据只能弹出，不够灵活
    var $ = {
      get:function(url,data,success){
        var xhr = this.createXhr();
        var str = url+'?'+data
        xhr.open('get',str);
        xhr.send();
        xhr.onload = function(){
          // alert(xhr.responseText);
          success(xhr.responseText);
        };
      },
      createXhr:function(){
        var xhr = '';
        if(window.XMLHttpRequest){
          xhr = new XMLHttpRequest();
        }else{
          xhr = new ActiveXObject('Msxml2','XMLHTTP');
        };
        return xhr;
      },
    };
    $.get('/api/getString','name=张',function(msg){
      document.querySelector('div').innerText = msg;
      console.log(msg);
      alert(msg);
    });
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>封装$.get方法发送请求(6)</title>
</head>
<body>
  <div></div>
  <script>
    //5.解决 返回值类型单一，只能使用字符串
    var $ = {
      get : function(url,data,success,dataType){
        var xhr = this.createXhr();
        var str = url +'?'+ data;
        xhr.open('get',str);
        xhr.send();
        xhr.onload = function(){
          var result = xhr.responseText;
          if(dataType == 'json'){
            result = JSON.parse(result)
          }else if(dataType == 'text'){
            result;
          }
          success(result);
        };
      },
      createXhr : function(){
        var xhr = null;
        if(window.XMLHttpRequest){
          xhr = new XMLHttpRequest();
        }else{
          xhr = new ActiveXObject('Msxml2','XMLHTTP');
        };
        return xhr;
      },
    };
    $.get('/api/searchStudent','name=张',function(msg){
      console.log(msg);
    },'json');
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>封装$.post方法发送请求</title>
</head>
<body>
  <div></div>
  <script>
    var $ = {
      get : function(url,data,success,dataType){
        var xhr = this.createXhr();
        var str = url +'?'+ data;
        xhr.open('get',str);
        xhr.send();
        xhr.onload = function(){
          var result = xhr.responseText;
          if(dataType == 'json'){
            result = JSON.parse(xhr.responseText);
          };
          success(result);
        };
      },
     
      post : function(url,data,success,dataType){
        var xhr = this.createXhr();
        xhr.open('post',url);
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
        xhr.send(data);
        xhr.onload = function(){
          var result = xhr.responseText;
          if(dataType === 'json'){
            result = JSON.parse(result)
          };
         success(result);
        };
      },
      
      createXhr : function(){
        var xhr = null;
        if(window.XMLHttpRequest){
          xhr = new XMLHttpRequest();
        }else{
          xhr = new ActiveXObject('Msxml2','XMLHTTP');
        };
        return xhr;
      },
    };

    $.get('/api/searchStudent','name=张',function(msg){
      console.log(msg)
    },'json');

    $.post('/api/postString', 'type=小黑',function(msg){
      document.querySelector('div').innerText = msg;
      console.log(msg);
    },'text');
  </script>
</body>
</html> -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>封装$.ajax方法发送请求</title>
</head>
<body>
  <div></div>
  <script>
    var $ = {
      get : function(url,data,success,dataType){
        var xhr = this.createXhr();
        var str = url +'?'+ data;
        xhr.open('get',str);
        xhr.send();
        xhr.onload = function(){
          var result = xhr.responseText;
          if(dataType == 'json'){
            result = JSON.parse(result);
          };
          success(result);
        };
      },

      post : function(url,data,success,dataType){
        var xhr = this.createXhr();
        xhr.open('post',url);
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
        xhr.send(data);
        xhr.onload = function(){
          var result = xhr.responseText;
          if(dataType == 'json'){
            result = JSON.parse(result)
          }
          success(result);
        }
      },

      ajax : function(obj){
        var type = obj.type || 'get';
        var url = obj.url;
        var data = obj.data || '';
        var dataType = obj.dataType || 'text';
        var success = obj.success;
        if(type == 'get'){
          this.get(url,data,success,dataType);
        }else if(type == 'post'){
          this.post(url,data,success,dataType);
        };
      },

      createXhr : function(){
        var xhr = '';
        if(window.XMLHttpRequest){
          xhr = new XMLHttpRequest();
        }else{
          xhr = new ActiveXObject('Msxml2','XMLHTTP');
        };
        return xhr;
      },
    };
    $.get('/api/searchStudent','name=张',function(msg){
      document.querySelector('div').innerText = msg;
      console.log(msg);
    },'json');

    $.post('/api/postString','type=哈哈哈',function(msg){
      console.log(msg);
    },'text');

    $.ajax({
      type : 'get',
      url : '/api/searchStudent',
      data : 'name=龙',
      dataType : 'json',
      success : function(msg){
        console.log(msg)
      }
    });
  </script>
</body>
</html>
